<template>
  <div>
  <ul>
    <li :class="{active:scrollPos == 0}">
      <a @click="$scrollTo(0)">Menu 1</a>
    </li>
    <li :class="{active:scrollPos == 1}">
      <a @click="$scrollTo(1)">Menu 2</a>
    </li>
  </ul>

  <div v-scrollspy="scrollPos" :offset='10' :steps="30" :time="200">
    <div>
      <h1>Header 1</h1>
      <p>Content</p>
    </div>
    <div>
      <h1>Header 2</h1>
      <p>Content</p>
    </div>
  </div>
  </div>
</template>

<script>


export default {
  name: 'test',
  components: {
  },
  props: {
    text: String,
    // 压缩尺寸,默认宽度为450px
    size: {
      type: Number,
      default: 750,
    },
  },
  data() {
    return {
      scrollPos: 0,
    };
  },

  // watch: {
  //   imageUrl(val, oldVal) {
  //     this.$emit('input', val);
  //     console.log(oldVal);
  //   },
  //   value(val) {
  //     this.imageUrl = val;
  //   },
  // },
  mounted() {
    this.$scrollSet();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
  .imgUploader {
    margin-top: 0.5rem;
    .file-item {
      float: left;
      position: relative;
      width: 100px;
      text-align: center;
      left: 2rem;
      img {
        width: 100px;
        height: 100px;
        border: 1px solid #ececec;
      }
      .file-remove {
        position: absolute;
        right: 0px;
        top: 4px;
        width: 14px;
        height: 14px;
        color: white;
        cursor: pointer;
        line-height: 12px;
        border-radius: 100%;
        transform: rotate(45deg);
        background: rgba(0, 0, 0, 0.5);
      }

      &:hover .file-remove {
        display: inline;
      }
      .file-name {
        margin: 0;
        height: 40px;
        word-break: break-all;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .add {
      width: 100px;
      height: 100px;
      float: left;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      cursor: pointer;
      border: 1px dashed #40c2da;
      color: #40c2da;
      position: relative;
      background: #ffffff;
      .icon {
        font-size: 1.4rem;
        color: #7dd2d9;
        vertical-align: -0.25rem;
      }
      .text {
        font-size: 1.2rem;
        color: #7dd2d9;
        vertical-align: 0.25rem;
      }
    }
  }
  input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    opacity: 0;
  }
</style>
